<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>
	<style type="text/css">
		body,td,th {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
		}
		body {
			background-color: #F4F5F7;
			margin-left: 0px;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			background-image: url();
		}
	</style>
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=en">
	</script>	
<script language="JavaScript" type="text/javascript">
function isNum(args)
{
args = args.toString();

if (args.length == 0)
return false;

for (var i = 0;  i<args.length;  i++)
{
	if (args.substring(i,i+1) < '0' || args.substring(i, i+1) > '9')
		{
		return false;
		}
}

return true;

}


function getHexNum(num)
{
	ar1 = new Array('0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
	ar2 = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
	if(num > 15)
	{
		return num;
	}
	else
	{
		red = ar2[num];
		return red;
	}
}


function isHexNum(num)
{
	args=num;
	sdsf = args.substring(args.length-1,args.length) ;
	//document.third.hexBin.value = sdsf;
	lc = sdsf.toLowerCase()
	if( isNum(sdsf) || lc =='a' || lc =='b' || lc =='c' || lc =='d' || lc =='e' || lc =='f')
	{
	return true;
	}
	return false;
}

function deciToHex(arg)
{
	res2 = 999;
	args = arg;
	while(args>15)
	{
		arg1=parseInt(args/16);
		arg2=args%16;
		arg2=getHexNum(arg2);
		args=arg1;

		if(res2 == 999)
		{
			res2=arg2.toString();
		}
		else
		{
			res2=arg2.toString()+res2.toString();
		}

	}
	if(args<16 && res2 != 999)
	{
		def = getHexNum(args);
		//document.first.deciBin.value = def;
		res2=def+res2.toString();
	}
	 else if(res2 == 999)
	{
		if(args < 16)
		{
			res2= getHexNum(args);
		}
		else
		{
			res2= 1;
		}
	}

	if(res2.length == 1)
	{
	  res2 = '0'+res2;
	}	
	return res2;

}

function hsvToRgb(h, s, v) {
	var r, g, b;
	var i;
	var f, p, q, t;
 
	// Make sure our arguments stay in-range
	h = Math.max(0, Math.min(360, h));
	s = Math.max(0, Math.min(100, s));
	v = Math.max(0, Math.min(100, v));
 
	// We accept saturation and value arguments from 0 to 100 because that's
	// how Photoshop represents those values. Internally, however, the
	// saturation and value are calculated from a range of 0 to 1. We make
	// That conversion here.
	s /= 100;
	v /= 100;
 
	if(s == 0) {
		// Achromatic (grey)
		r = g = b = v;
		return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
	}
 
	h /= 60; // sector 0 to 5
	i = Math.floor(h);
	f = h - i; // factorial part of h
	p = v * (1 - s);
	q = v * (1 - s * f);
	t = v * (1 - s * (1 - f));
 
	switch(i) {
		case 0:
			r = v;
			g = t;
			b = p;
			break;
 
		case 1:
			r = q;
			g = v;
			b = p;
			break;
 
		case 2:
			r = p;
			g = v;
			b = t;
			break;
 
		case 3:
			r = p;
			g = q;
			b = v;
			break;
 
		case 4:
			r = t;
			g = p;
			b = v;
			break;
 
		default: // case 5:
			r = v;
			g = p;
			b = q;
	}
 
	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
	window.onerror = ErrorSetting 
	var e_msg="";
	var e_file="";
	var e_line=""; 

	function ErrorSetting(msg, file_loc, line_no) 
	{
		e_msg=msg;
		e_file=file_loc;
		e_line=line_no;
		return true; 
	} 
			
	var poly;
  	var map;
  	var point;
  	var marker;
  	var markersArray = [];
  	
  	var latlng;
  	var myOptions;
  	var polyOptions;
//	var car_speed =0;
	var currentSpeedRange=-1;
	var last_latlng;
  	
 	
	function load() 
	{     
		latlng = new google.maps.LatLng(37.403350, 127.109900);     
		myOptions = {zoom: 15,
								 center: latlng,
								 mapTypeId: google.maps.MapTypeId.ROADMAP};     
									 
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);					
		
		polyOptions = {
		  strokeColor: '#FF0000',
  		strokeOpacity: 1.0,
  		strokeWeight: 5
		}
    		    	
   		poly = new google.maps.Polyline(polyOptions);
    	poly.setMap(map);      
    	    	
    	var path = poly.getPath();
    	path.push(latlng);
    	last_latlng = latlng;
			
			// Add a listener for the click event
    	//google.maps.event.addListener(map, 'click', addLatLng);
    	addMarker(latlng);
	}  				
  
    function GUnload()
    {
    }
    
    function addLatLng(event) 
	{
    	var path = poly.getPath();

    	// Because path is an MVCArray, we can simply append a new coordinate
    	// and it will automatically appear
    	path.push(event.latLng);        	
    	  
    	deleteOverlays();
    	
    	addMarker(event.latLng);
    	
    	moveCenter(event.latLng);
 	}
 		
	function addMarker(location) 
	{
		var path = poly.getPath();
		var myIcon = new google.maps.MarkerImage("marker.png", null, null, null, new google.maps.Size(30,30)); 
	
		marker = new google.maps.Marker({
	  	position: location,
	  	title: 'GPS Index : ' + path.getLength(),
	  	map: map,
	  	icon: myIcon
		});
		markersArray.push(marker);
		
		google.maps.event.addListener(marker, 'click', function() {
	  	infoWindow();
		});
    }

    function refresh() {
         if (poly) {
             poly.setMap(null);
         }

         deleteOverlays();
 
         var polyOptions = {
             strokeColor: '#FF0000',
             strokeOpacity: 1.0,
             strokeWeight: 5
         }
 
         poly = new google.maps.Polyline(polyOptions);
         poly.setMap(map);

        //alert(">>>>>>>refresh");
        var path = poly.getPath();
        path.push(last_latlng);

        addMarker(last_latlng);
        map.setCenter(last_latlng);
    }
  	
	function setLatLag(Latitude, Longitude, car_speed, bFirst)
	{	
		//alert(">>>>>>>>addLatLng");
		var latlng = new google.maps.LatLng(Latitude, Longitude);  
		
		if (bFirst)
		{								
			if (poly)
			{
				poly.setMap(null);  
			}
	
			deleteOverlays();
			
 			var polyOptions = {
     	    	strokeColor: '#FF0000',
           		strokeOpacity: 1.0,
           		strokeWeight: 5
     		}
    		    	
	   		poly = new google.maps.Polyline(polyOptions);
	    	poly.setMap(map);      
		
			var path = poly.getPath();
			path.push(latlng);
			last_latlng = latlng;
		
			addMarker(latlng);    
			map.setCenter(latlng);
		}
		else
		{	
			var range = Math.floor(car_speed);

    		if( currentSpeedRange != range )
    		{
	    		var rgb = hsvToRgb(range*10, 240, 120);
				var strokeColor_t = '#'+deciToHex(rgb[0]);
				strokeColor_t += ''+deciToHex(rgb[1]);
				strokeColor_t += ''+deciToHex(rgb[2]);	
    		
				var polyOptions = {
	    			strokeColor: strokeColor_t,
			  		strokeOpacity: 1.0,
		      		strokeWeight: 5
	    		}
				poly = new google.maps.Polyline(polyOptions);
	    		poly.setMap(map); 
	    		
	    		currentSpeedRange = range;
				var path = poly.getPath();
				path.push(last_latlng);
    		}

			var path = poly.getPath();
			path.push(latlng);
			last_latlng = latlng;

			deleteOverlays();
			addMarker(latlng);    
			moveCenter(latlng);	  
		} 			    	 
	}
 		
 	function moveCenter(location)
 	{
 		map.panTo(location);
 	}
 		
 	function deleteOverlays() 
 	{
    	if (markersArray) 
    	{
	      	for (i in markersArray) 
	      	{
	        	markersArray[i].setMap(null);
	      	}
      		markersArray.length = 0;
    	}
  	}
  	
  	function infoWindow()
  	{
  		var contentString = '<div id="content">'+      	  
    	    '<b>Latitude  : </b>also<br>'+
    	    '<b>Longitude : </b>Uluru'+	        
  	      '</div>';
        
  		var infownd = new google.maps.InfoWindow({
        	content: contentString
        });
      
		infownd.open(map,marker);
  	}
</script> 

</head> 

  <body onload="load()" onunload="GUnload()" scroll="no" silent="true">
	  <div id="map_canvas" style="overflow-x:hidden; overflow-y:hidden; width:100%; height:100%;"></div> 
  </body> 

</html>